<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文字加载</title>
		<style>
			body{
				padding: 0;
			}
		    .login{
			   	width: 100%;
			   	height: 100%;
			   	position: fixed;
			   	z-index: 9999;
			   	background: #F5F5F9;
		    }
			@keyframes move{
			   	0%{ 
			   		transform:rotate(0deg);
			   	}
			   	100%{ 
			   		transform: rotate(360deg);
			   	}
			}
			.rotate{
				width: 100px;
				height: 100px;
				margin: -110px auto;
				animation: move 3s linear infinite;
				overflow: hidden;
				position: relative;
			}
			.rotate1{
				position:absolute;
			    width: 50px;
			    height: 100px;
			    border-radius:0 50px 50px 0;
			    left:50%;
			    background: linear-gradient(#eee,#008ED9);
			    z-index:1;
			}
			.rotate2{
				position:absolute;
				width:92px;
				height:92px;
				top:4px;
				left:4px;
				border-radius:50%;
				background-color: #fff;
				z-index:2;
			}
			.test{
				width: 100px;
				height: 100px;
				position: relative;
				margin: 10px auto;
				text-align: center;
				line-height: 100px;
				font-size: 1.2rem;
				color: #E9ECED;
				z-index: 999;
			}
			.test::before{
				content: attr(data-letters);
				position: absolute;
				width: 0;
				z-index: 2;
				color: #008ED9;
				overflow: hidden;
				white-space: nowrap;
				animation: testToColor 1.5s linear infinite;
				animation-fill-mode:forwards;
			    -webkit-animation-fill-mode:forwards;
			    -moz-animation-fill-mode:forwards;

			}
			@keyframes testToColor{
				0%{
					width: 0;
				}
				100%{
					width: 50%;
				}
			}
		</style>
	</head>
	<body>
		<div class="login">
			<div class="test" data-letters = "Login">Login</div>
			<div class="rotate">
				<div class="rotate1"></div>
				<div class="rotate2"></div>
			</div>
		</div>
	</body>
</html>
